<style lang="less">
</style>

<template>
  <div>
    <iview-table
            ref="table"
            :data="data"
            :baseURL="queryModel.baseURL"
            :menuId="dataModel.menuId"
            :columns="dataModel.columns"
            :order="dataModel.order"
            :pageNumber="pageModel.pageNumber"
            :pageSize="pageModel.pageSize"
            :defaultFilters="queryModel.defaultFilters"
            v-on="{changeTotalSize:changeTotalSize,changeSelect:changeSelect,getData:getData}">
    </iview-table>
    <Card :bordered="false" :dis-hover="true">
      <p slot="title">
        <label style="font: bold 16px/20px arial, sans-serif; color: rgb(153, 153, 153);">总金额：<label style="color: red">{{payInfo.actualAmount}}</label></label>
      </p>
      <Row>
        <Col :span="2">
          <img style="width: 100px" src="@/images/pay/zhifu5.png"/>
        </Col>
        <Col :span="2">
          <img style="width: 100px" src="@/images/pay/zhifu1.png"/>
        </Col>
        <Col :span="2">
          <img style="width: 100px" src="@/images/pay/zhifu2.png"/>
        </Col>
        <Col :span="2">
          <img style="width: 100px" src="@/images/pay/zhifu3.png"/>
        </Col>
        <Col :span="2">
          <img style="width: 100px" src="@/images/pay/zhifu4.png"/>
        </Col>
      </Row>
      <Row>
        <Col :span="2">
          <InputNumber style="width: 100px" v-model="payment.store" @on-change=""></InputNumber>
        </Col>
        <Col :span="2">
          <InputNumber style="width: 100px" v-model="payment.alipay"></InputNumber>
        </Col>
        <Col :span="2">
          <InputNumber style="width: 100px" v-model="payment.wechat"></InputNumber>
        </Col>
        <Col :span="2">
          <InputNumber style="width: 100px" v-model="payment.bankCard"></InputNumber>
        </Col>
        <Col :span="2">
          <InputNumber style="width: 100px" v-model="payment.cash"></InputNumber>
        </Col>
      </Row>
    </Card>
    <Card :bordered="false" :dis-hover="true">
      <p slot="title">&nbsp;</p>
      <Row>
        <Col :span="2" offset="22">
          <Button @click="doMake" style="background-color: #f56954;width: 100%;height: 58px">
            <label style="color: #fff;font-size: 16px">交费</label>
          </Button>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    export default {
        components: {
            iviewTable,
            iviewPage
        },
        props: {
            patientId: {
                type: Number,
                default: -1
            }
        },
        data () {
            return {
                baseURL: '/user/wait/payment',
                selectRows: [],
                data: [],
                queryModel: {
                    // 网关代理路径(必须)+资源路径(可选)
                    baseURL: '/user/wait/payment',
                    defaultFilters: [
                        {'field': 'patient_id', 'value1': -1, 'operate': '=='}
                    ]
                },
                dataModel: {
                    menuId: -1,
                    columns: [
                        {
                            title: '欠费项目',
                            key: 'businessName'
                        },{
                            title: '购买单价',
                            key: 'price'
                        },{
                            title: '购买数量',
                            key: 'quantity'
                        },{
                            title: '总价格',
                            key: 'totalAmount'
                        },{
                            title: '已交费',
                            key: 'payAmount'
                        },{
                            title: '本次交费',
                            key: 'thisPayAmount',
                            render: (h, params) => {
                                var vm = this
                                var maxValue = params.row.totalAmount - params.row.payAmount
                                return h('InputNumber',{
                                    props: {
                                        min: 0,
                                        max: maxValue,
                                        value: params.row.thisPayAmount
                                    },
                                    style: {
                                        width: '100%'
                                    },
                                    on: {
                                        'on-change' (value) {
                                            params.row.thisPayAmount = value
                                            vm.data[params.index] = params.row
                                            vm.computeAmount()
                                        }
                                    }
                                });
                            }
                        }
                    ],
                    order: 'creation_time asc'
                },
                pageModel: {
                    totalSize: 0,
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizeOpts: [10, 50, 100, 500]
                },
                payment: {
                    store: '',
                    gift: '',
                    bankCard: '',
                    alipay: '',
                    wechat: '',
                    cash: ''
                },
                payInfo: {
                    actualAmount: '0.00'
                }
            };
        },
        methods: {
            doMake () {
                this.selectRows = []
                for (let row of this.data) {
                    if (row.thisPayAmount > 0) {
                        this.selectRows.push(row)
                    }
                }
                if (this.selectRows.length > 0) {
                    let url = '/user/member/make'
                    this.$ajax.post(url, {
                        records: JSON.stringify(this.selectRows),
                        payInfo: JSON.stringify(this.payInfo),
                        payment: JSON.stringify(this.payment)
                    }).then((response) => {
                        let {code, params, msg} = response.data
                        if (code === 0) {
                            this.$bus.alert('success', msg)
                            this.$bus.init(this.payment)
                            this.refreshPatient()
                            this.refresh()
                            var task = {}
                            let autoPrint = params.autoPrint
                            if (autoPrint === 1) {
                                task = params.task
                                this.$print.get('/print/getHost').then(response => {
                                    let {code, data, msg} = response.data
                                    if (code === 0) {
                                        this.$ajax.get('/user/finance/print/getDefault/' + data).then(response => {
                                            let {code, data, msg} = response.data
                                            if (code === 0) {
                                                task.printName = data.printName
                                                this.$print.post('/print/expenses', task).then(response => {
                                                    if (response.data === 'success') {
                                                        this.$bus.modal('success', '系统提示', '已向打印机发送任务')
                                                    }
                                                })
                                            } else {
                                                this.$bus.alert('error', msg)
                                            }
                                        })
                                    } else {
                                        this.$bus.alert('error', msg);
                                    }
                                })
                            }
                        } else {
                            this.$bus.alert('error', msg)
                        }
                    })
                } else {
                    this.$bus.alert('warning', '请至少选择一条记录')
                }
            },
            refreshPatient () {
                this.$emit('refreshPatient')
            },
            resetPayInfo () {
               this.$bus.init(this.payment)
               this.payInfo.actualAmount = '0.00'
            },
            computeAmount () {
                let actualAmount = 0
                for (let row of this.data) {
                    if (row.thisPayAmount > 0) {
                        actualAmount += parseFloat(row.thisPayAmount)
                    }
                }
                this.payInfo.actualAmount = actualAmount
            },
            changeSelect (rows) {
            },
            getData (data) {
                this.data = data
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            refresh () {
                this.$refs.table.refresh()
            },
            init () {
                this.refresh()
            }
        },
        mounted () {
            this.init()
        },
        watch: {
            patientId: function (val, oldVal) {
                this.queryModel.defaultFilters[0] = {'field': 'patient_id', 'value1': val, 'operate': '=='}
            }
        }
    }
</script>

<style>

</style>
